<template>
  <div class='searchBox'>
	  <div class="searchBar">
		  <van-search v-model="value" placeholder="请输入搜索关键词" />
	  </div>
	  <div class="listBox">
		  <van-card
				v-for="(v,i) in filterList"
				:key='i'
				price="2.00"
				:desc="v.context"
				:title="v.name"
				:thumb="v.image"
			/>
	  </div>
  </div>
</template>

<script>
import {mapState, mapGetters,mapMutations} from 'vuex'
export default {
	data() {
		return {
			value: null,
		}
	},
	computed: {
        ...mapState(['bookList']),
        filterList() {
            return this.bookList.filter((v,i) => {
                return this.value && v.name.includes(this.value)
            })
        }
	},
	created() {
		this.$http.get('/api/list').then((data) => {
			this.$store.commit('setBookList',data.data)
		})
	}
};
</script>

<style>
</style>